<template>
  <div>
    <div class="content-item">
      <el-form :model="baseInfo"
               inline>
        <el-row>
          <el-col :span="8">
            <el-form-item label="配置名称：">
              {{baseInfo.name}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配置单元：">
              {{baseInfo.unit}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适用类型：">
              {{baseInfo.applianceTypeName || '不限'}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="适用性别：">
              {{$transSex(baseInfo.applianceSex)}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适用年级：">
              {{baseInfo.applianceGrade || '不限'}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content-item">
      <el-row :gutter="20">
        <el-col :span="14"
                class="tab-item">
          <el-input v-model="queryString1"
                    style="width: 200px;margin-bottom: 10px;"
                    :placeholder="baseInfo.unit === '人员' ? '请输入学生学号或姓名':'请输入班级名称'"
                    size="small"></el-input>
          <el-button type="primary"
                     size="small"
                     @click="query(1, 'sn', 'name')"
                     v-if="baseInfo.unit === '人员'">搜索</el-button>
          <el-button type="primary"
                     size="small"
                     @click="query(1, 'className')"
                     v-else>搜索</el-button>
          <TabList :tabData="tabData1"
                   class="table-header-gray fixTab"
                   v-if="baseInfo.unit === '人员'"
                   :specCol="sepecCol"
                   :columns="columns3"></TabList>
          <TabList :tabData="tabData1"
                   v-else
                   class="table-header-gray fixTab"
                   :columns="columns1"></TabList>
          <p class="choosed">已选人数【{{baseInfo.totalNum || 0}}】</p>
        </el-col>
        <el-col :span="10"
                class="tab-item">
          <el-input v-model="queryString2"
                    style="width: 200px;margin-bottom: 10px;"
                    placeholder="请输入房间号"
                    size="small"></el-input>
          <el-button type="primary"
                     size="small"
                     @click="query(2, 'roomName')">搜索</el-button>
          <TabList :tabData="tabData2"
                   class="table-header-gray fixTab"
                   :columns="columns2"></TabList>
          <p class="choosed">已选床位【{{baseInfo.totalBed || 0}}】</p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {
  getSettingConfigInfoUsingGET
} from '@api/auto'
export default {
  data () {
    return {
      baseInfo: {},
      queryString1: '',
      queryString2: '',
      tabData1: [],
      checkTabData1: [],
      columns1: [
        { label: '院系', prop: 'collegeName' },
        { label: '专业', prop: 'majorName' },
        { label: '年级', prop: 'gradeName' },
        { label: '班级', prop: 'className' },
        { label: '总人数', prop: 'totalStudent' },
        { label: '优先级', prop: 'weight' }
      ],
      tabData2: [],
      checkTabData2: [],
      columns2: [
        { label: '房间', prop: 'roomName' },
        { label: '空余床位数', prop: 'bedNum' },
        { label: '优先级', prop: 'weight' }
      ],
      columns3: [
        { label: '学号', prop: 'sn' },
        { label: '姓名', prop: 'name' },
        { label: '性别', prop: 'gender' },
        { label: '院系', prop: 'collegeName' },
        { label: '专业', prop: 'majorName' },
        { label: '班级', prop: 'className' }
      ],
      sepecCol: [
        { label: '性别', prop: 'gender', tem: `<span>{{$transSex(gender)}}</span>` }
      ]
    }
  },
  created () {
    this.getSettingConfigInfoUsingGET(JSON.parse(sessionStorage.editRow).id)
  },
  methods: {
    query (num, judgeStr, judgeStr2) {
      let tabData = []
      if (judgeStr2) {
        this[`checkTabData${num}`].forEach(ele => {
          if (ele[judgeStr].includes(this[`queryString${num}`]) || ele[judgeStr2].includes(this[`queryString${num}`])) {
            tabData.push(ele)
          }
        })
      } else {
        this[`checkTabData${num}`].forEach(ele => {
          if (ele[judgeStr].includes(this[`queryString${num}`])) {
            tabData.push(ele)
          }
        })
      }
      this[`tabData${num}`] = tabData
    },
    getSettingConfigInfoUsingGET (id) {
      getSettingConfigInfoUsingGET(id).then(res => {
        this.baseInfo = res.data
        this.tabData1 = res.data.unit === '人员' ? res.data.studentList : res.data.classInfoDtoList
        this.checkTabData1 = res.data.unit === '人员' ? res.data.studentList : res.data.classInfoDtoList
        this.checkTabData2 = res.data.roomInfoDtos
        this.tabData2 = res.data.roomInfoDtos
        console.log(this.baseInfo, 'ddd')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.baseInfo {
  display: flex;
  justify-content: space-between;
}
.tab-item {
  padding: 10px;
  border: 1px solid #cccccc;
  min-height: 625px;
  position: relative;
}
.fixTab {
  max-height: 480px;
  overflow: auto;
}
.choosed {
  position: absolute;
  bottom: 0px;
  left: 10px;
}
</style>
